<template>
  <div>
    <!-- 模糊搜索 -->
    <el-card class="searchTop">
      <div slot="header">条件查询</div>

      <el-form ref="searchForm" :model="searchList" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="订单编号" prop="orderSn">
              <el-input
                style="width: 60%"
                size="mini"
                v-model="searchList.orderSn"
                placeholder="请填写订单编号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单类型" prop="sourceType">
              <el-select
                size="mini"
                v-model="searchList.sourceType"
                placeholder="订单类型"
              >
                <el-option label="正常订单" value="1"></el-option>
                <el-option label="秒杀订单" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="支付方式" prop="payType">
              <el-select
                size="mini"
                v-model="searchList.payType"
                placeholder="支付方式"
              >
                <el-option label="未支付" value="0"></el-option>
                <el-option label="支付宝" value="1"></el-option>
                <el-option label="微信" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单状态" prop="status">
              <el-select
                size="mini"
                v-model="searchList.status"
                placeholder="订单状态"
              >
                <el-option label="待付款" value="0"></el-option>
                <el-option label="待发货" value="1"></el-option>
                <el-option label="已发货" value="2"></el-option>
                <el-option label="已完成" value="3"></el-option>
                <el-option label="已关闭" value="4"></el-option>
                <el-option label="无效订单" value="5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="end">
          <el-form-item>
            <el-button
              size="mini"
              type="primary"
              @click="submitSearch('searchForm')"
              >搜素</el-button
            >
            <el-button
              style="margin: 0 20px"
              size="mini"
              @click="resetSearch('searchForm')"
              >重置</el-button
            >
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>

    <!-- 订单数据 -->
    <el-card class="searchTop">
      <el-table :data="list" border style="width: 100%">
        <el-table-column fixed type="index" label="#" width="50">
        </el-table-column>
        <el-table-column align="center" prop="id" label="订单编号" width="300">
        </el-table-column>
        <el-table-column align="center" label="支付方式" width="200">
          <template slot-scope="scope">
            <div v-if="scope.row.payType==0" class="no_pay">未支付</div>
            <img v-if="scope.row.payType==1" class="pay_pic" src="@/../static/icon/支付宝.svg" alt="">
            <img v-if="scope.row.payType==2" class="pay_pic" src="@/../static/icon/微信支付.svg" alt="">
          </template>
        </el-table-column>
        <el-table-column align="center" label="订单状态" width="200">
          <template slot-scope="scope">
            <div v-if="scope.row.status==0" class="wait_pay">待付款</div>
            <div v-if="scope.row.status==1" class="wait_deliver">待发货</div>
            <div v-if="scope.row.status==2" class="is_deliver">已发货</div>
            <div v-if="scope.row.status==3" class="is_done">已完成</div>
            <div v-if="scope.row.status==4" class="is_close">已关闭</div>
            <div v-if="scope.row.status==5" class="invalid">无效</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="添加时间" width="300">
        </el-table-column>
        <el-table-column align="center" prop="memberUsername" label="用户账号" width="250"> </el-table-column>
        <el-table-column align="center" label="订单类型" width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.sourceType==1" class="nomal_order">正常订单</div>
            <div v-if="scope.row.sourceType==0" class="seckill_order">秒杀订单</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="note" label="备注" width="150">
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="checkOrder(scope.row.id)" type="primary" size="small" icon="el-icon-view"
              >查看订单</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import mixin from '@/mixins/index'
import {findOrdersByPage} from "@/api/order/orderList"
export default {
  mixins:[mixin],
  data() {
    return {
      // 模糊搜索数据
      searchList: {},
      // 订单列表数据
      list:[],
    }
  },
  created(){
    this.getData()
  },
  methods: {
    //提交搜索
    submitSearch(formName) {
      this.page.currentPage = 1
      this.getData()
    },
    //重置表单
    resetSearch(formName) {
      this.$refs[formName].resetFields()
    },
    // 获取订单数据
    getData(){
      findOrdersByPage(this.page.currentPage,this.page.size,this.searchList).then(res=>{
        console.log(res);
        this.list=res.data.rows
        this.page.total = res.data.total
      })
    },
    //查看订单跳转
    checkOrder(val){
      // console.log(val);
      this.$router.push({path:"/order/SeeOrder",query:{
        id:val
      }})
    },
    //每页条数
    handleSizeChange(val){
      this.page.size = val
      this.page.currentPage = 1
      this.getData()
    },
    //当前页数
    handleCurrentChange(val){
      this.page.currentPage = val
      this.getData()
    },
  }
}
</script>

<style lang="scss">
// 头部标题
.info {
  padding: 10px 0;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 30px;
  font-size: 16px;
}
.app-main {
  background-color: #f0f2f5;
  font-size: 12px;
}
.el-form-item__label {
  font-weight: 400;
  
}
// 卡片设置
.searchTop {
  margin: 20px;
}
</style>
<style lang="scss" scoped>
// 卡片设置
.searchTop {
  margin: 20px;
}
.no_pay,.wait_pay,.wait_deliver,.is_deliver,.is_done,.is_close,.invalid{
  color: #fff;
  padding: 0 10px;
  font-size: 12px;
  width: 58px;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
  margin: 0 auto;
}
//未支付
.no_pay{
  background-color: #909399;
  border-color: #909399;
  
}
//待付款
.wait_pay{
  background-color: #f56c6c;
  border-color: #f56c6c;
}
//待发货
.wait_deliver{
  background-color: #e6a23c;
  border-color: #e6a23c;
}
//已发货
.is_deliver{
  background-color: #ecf5ff;
  border-color: #d9ecff;
  color: #409eff;
}
// 已完成
.is_done{
  background-color: #409eff;
}
//已关闭
.is_close{
  background-color: #909399;
  border-color: #909399;
}
//无效订单
.invalid{
  background-color: #545484;
}
//付款方式
.pay_pic{
  width: 35px;
  height: 35px;
}
//正常订单
.nomal_order{
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  color: #67c23a;
  width: 70px;
  height: 32px;
  padding: 0 10px;
  line-height: 30px;
  font-size: 12px;
  border-radius: 4px;
  margin: 0 auto;
}
//秒杀订单
.seckill_order{
  background-color: #548741;
  border-color: #548741;
  color: #67c23a;
  width: 70px;
  height: 32px;
  padding: 0 10px;
  line-height: 30px;
  font-size: 12px;
  border-radius: 4px;
  margin: 0 auto;
}
</style>